<template>
    <div class="pug-header">
        <span class="pug-logo">
            <el-image class="mr-2" src="/src/assets/img/logo-w.png" fit="fit" />
            <span class="font-bold">PugAdmin</span>
        </span>

        <div class="pug-user-box">
            <el-dropdown @command="handleCommand">
                <span class="pug-user-au">
                    <el-avatar class="mr-3" :size="25" src="/src/assets/img/nodata.png" />
                    <span class="mr-1">Mickey</span>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="UpdatePwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="Logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>



</script>

<style scoped>

.pug-header {
    @apply flex items-center bg-indigo-700 fixed right-0 left-0 text-lime-50;
    height: 48px;
    z-index: 1000;
}

.pug-logo {
    @apply flex items-center justify-center;
    width: 208px;
}

.pug-l-btn {
    @apply flex items-center justify-center text-light-50;
    cursor: pointer;
    width: 48px;
    height: 48px;
}

.pug-l-btn:hover {
    @apply bg-indigo-600;
}

.pug-user-box {
    @apply ml-auto flex items-center mr-5;
}

.pug-user-au {
    @apply flex items-center text-light-50;
}
</style>